<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
#parse("/WEB-INF/views_webapp/layout/css.html")
#parse("/WEB-INF/views_webapp/layout/base.html")
<title>
#if($cookie.shelfName && $cookie.shelfName != "")
  $URLUtil.urlDecoderUTF8("$!cookie.shelfName")
#else
  咕哒猎人
#end
</title>
<style type="text/css">
body{
	background: #eee;
}
.itembox{
	padding: 10px;
	background: #fff;
	position: relative;
}
.good-img{
	width: 40px;
	height: 40px;
	background: #ccc;
}
.jflex{
	display: box;              /* OLD - Android 4.4- */
  display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
  display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
  display: -ms-flexbox;      /* TWEENER - IE 10 */
  display: -webkit-flex;     /* NEW - Chrome */
  display: flex;  
}
.vcenter{
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.good-info{
	-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;  
	padding-left: 10px;
	color: #000;
}
.good-fee{
	color:red;
}
.gray{
	color: #999;
}
.goodsline{
	padding: 10px 0 10px 0;
	position: relative;
}
.oldfee{
	color: #999 !important;
	text-decoration:line-through;
	font-size: 12px;
	text-align: right;
}
.countfee{
	padding: 10px 0 0 0;
	text-align: right;
}
.red{
	color:red !important;
}
.ordertitle{
	padding: 10px;
}
.order_lines{
	padding: 5px 0 5px 0;
	color: #555;
}
.order-lines-lable{
	-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
  -moz-box-flex: 1;         /* OLD - Firefox 19- */
  width: 20%;               /* For old syntax, otherwise collapses. */
  -webkit-flex: 1;          /* Chrome */
  -ms-flex: 1;              /* IE 10 */
  flex: 1;  
	color: #999;
}
.paybtns{
	width:100%;
	height: auto;
	position: fixed;
	bottom: 0;
	left: 0;
	padding: 10px;
	background:#f5f5f5;
	z-index: 1000;
}
.paybtniner{
	display: block;
	width: auto;
	height:44px;
	background:#09BB07;
	line-height:44px;
	margin-bottom: 0;
	text-align: center;
	margin-bottom: 10px;
	border-radius: 4px;
	color: #fff;
}
.paybtniner.bgapay{
	background: #01A8F9;
}
.paybtniner:active{
	opacity: 0.8;
}
.paybtniner:last-child{
	margin-bottom: 0;
}
.paddingH{
	height: 13rem;
}
</style>
</head>
<body>
<input type="hidden" id="ordersNo" value="$!{ordersNo}">
<div class="ordertitle">
	商品信息
</div>

<div class="itembox line-t line-b">
	#foreach($row in $ordersChildList)
	<div class="jflex vcenter goodsline line-b">
		<div class="good-img"><img src="$!{row.mainImg}" class="img"/></div>
		<div class="good-info">
			$!{row.itemName}
		</div>
		<div class="good-fee">
			<div><span class="gray">￥</span>$!{row.actualCosts}</div>
			#if($row.hasDiscount)
			<div class="oldfee"><span class="gray">￥</span>$!{row.originPrice}</div>
			#end 
		</div>
	</div>
	#end
	
	#set($ofg=$ordersFeeOrigin)
	<div class="countfee">
		共<span class="red">$!{ordersChildList.size()}</span>件商品，合计：￥<span class="red">${ordersFee}</span>
	</div>
</div>

<div class="ordertitle">
	订单信息
</div>

<div class="itembox line-t line-b">
	<div class="order_lines jflex">
		<div class="order-lines-lable">订单金额</div>
		<div>￥${ordersFee}</div>
	</div>
<!-- 	<div class="order_lines jflex"> -->
<!-- 		<div class="order-lines-lable">优惠合计</div> -->
<!-- 		#set($dfee=(${ordersFeeDiscount})) -->
<!-- 		<div>￥$!{ordersFeeDiscount}</div> -->
<!-- 	</div> -->
	<div class="order_lines jflex">
		<div class="order-lines-lable">实付金额</div>
		<div class="red">￥${ordersFee}</div>
	</div>
</div>
<div class="paddingH"></div>
<div class="paybtns">
	#if($h5Client == "zfb" || $h5Client == "dd")
	  <a class="paybtniner bgapay" id="zfbPay">支付宝支付</a>
	#elseif($h5Client == "wx")
	  <a class="paybtniner" id="wxPay">微信支付</a>
	#elseif($h5Client == "yzf")
	  <a class="paybtniner" id="yzfPay">翼支付</a>
	#else
	#end
	
	#if($ordersData.balance && $ordersData.balance >= ${ordersFee})
	  <a class="paybtniner" id="balancePay" onclick="balancePay()" style="background: #fff000;color: #231f04;">余额支付($!ordersData.balance)</a>
	#elseif($ordersData.balance && $ordersData.balance > 0)
	  <a class="paybtniner" id="balancePay" style="background: #fff000;color: #231f04;">余额不足($ordersData.balance)</a>
	#end
</div>

#parse("/WEB-INF/views_webapp/layout/bottom.html")


<script type="text/javascript">
	function balancePay(){
		window.location.href= path + "/h5/balance/pay?ordersNo=" + $("#ordersNo").val();
	}
</script>

#if($h5Client == "zfb" || $h5Client == "dd")
	$!{zfbPayForm}
	<script type="text/javascript">
		$(function(){
			$("#zfbPay").click(function(){
				document.forms[0].submit();
			});
		});
	</script>
#elseif($h5Client == "yzf")
	<script type="text/javascript" src="$!{path}/static/res/webapp/js/bestpay.api.js?1=1"></script>
	<script type="text/javascript">
		var shelfName = "$shelfName";
		window.onload = function(){
			App.setTitle(document.title);
		}
		
		$(function(){
			$("#yzfPay").click(function(){
				yzfPay();
			});
		});
		
		function yzfPay(){
			var payJson={
			           "MERCHANTID":"02330107050260415",
			           "SUBMERCHANTID":"",
			           "MERCHANTPWD":"167917", 
			           "ORDERSEQ":"$!{ordersNo}",
			           "ORDERAMOUNT":"$!{ordersFee}",
			           "ORDERTIME":"$!{ordersTime}",
			           "ORDERVALIDITYTIME":"$!{ordersValidityTime}",
			           "PRODUCTDESC":"$!{ordersDesc}",
			           "CUSTOMERID":"",
			           "PRODUCTAMOUNT":"$!{ordersFeeFen}",
			           "ATTACHAMOUNT":"0",
			           "CURTYPE":"RMB",
			           "BACKMERCHANTURL":"http://127.0.0.1:8040/wapBgNotice.action",
			           "ATTACH":"",
//			            "PRODUCTID":"04",
//			            "USERIP":"192.168.11.130",
			           "DIVDETAILS":"",
//			            "ACCOUNTID":"12345678901",
			           "BUSITYPE":"04",
			           "ORDERREQTRANSEQ":"$!{ordersNo}",
			           "SERVICE":"mobile.security.pay",
			           "SIGNTYPE":"MD5",
//			            "SIGN":"223",
			           "SUBJECT":"$!{ordersDesc}",
			           "SWTICHACC":"true"
//			            "SESSIONKEY":"asdfasdfahskfjalsdfkajsdfljasdlfjsjfkj",
//			            "OTHERFLOW":"01",              
//			            "ACCESSTOKEN":"lajsfsdjfaljdsflajdsfjalkjslaa"
			        };
				
				//payJson.SIGN = $.md5($.md5("BESTPAY**#11888" + User.getProduct() + "!@#$%^&*,./quyiyuan"));
				//支付成功的回调函数
			    var paySuccess = function (msg) { 
		    		window.location.href= path + "/h5/yzf/pay/success?ordersNo=" + $("#ordersNo").val();
			    }
			    //支付失败的回调函数
			    var payFail = function (msg) {
			    	if(msg == "cancel"){
			    		$.ui.alert("已取消支付");
			    	}else{
			    		$.ui.alert("支付失败: " + msg);
			    	}
			    }
			    //调起翼支付支付界面
			    Payment.onPay(payJson, paySuccess, payFail);
		}
	</script> 
#elseif($h5Client == "wx")
	<!--如果是微信客户端，需要以下代码--->
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		wx.config({
		    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
		    appId: '${config.appId}', // 必填，公众号的唯一标识
		    timestamp:'${config.timestamp}', // 必填，生成签名的时间戳
		    nonceStr: '${config.nonceStr}', // 必填，生成签名的随机串
		    signature: '${config.signature}',// 必填，签名，见附录1
		    jsApiList: [
		    	'scanQRCode'
		    ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});	
		wx.ready(function () {
			 WeixinJSBridge.call('hideOptionMenu');
		});
		
		$(function(){
			$("#wxPay").click(function(){
				wxPay();
			});
		});
		function wxPay(){
				WeixinJSBridge.invoke('getBrandWCPayRequest',{
				    "appId" : "${appId}", //公众号名称，由商户传入
		            "timeStamp" :"${timestamp}", //时间戳
		            "nonceStr" :"${nonceStr}", //随机串
		            "package" :"prepay_id=${prepayId}",//扩展包
		            "signType" :"MD5", //微信签名方式:1.sha1
		            "paySign" :"${paySign}" //微信签名
			    },function (res) {
			    	try{
					   //支付成功
					   //使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。 
				 	   if(res.err_msg.indexOf("get_brand_wcpay_request:ok") >= 0){
				     	   window.location.href= path + "/h5/wx/pay/success?ordersNo=" + $("#ordersNo").val();
				     	   return;
				        }else if(res.err_msg.indexOf("get_brand_wcpay_request:cancel") >= 0)  {
				     	   //发起请求修改订单状态
				     	   $.ui.alert("提示:","已取消支付");
				     	  return;
				        }else {
				     	   $.ui.alert("提示:","支付失败:" + res.err_msg);//支付失败信息
				     	  return;
				        }
			    	}catch(e){
			    		 $.ui.alert("提示:","支付返回信息:" + res.err_msg.indexOf("get_brand_wcpay_request:ok"));//支付失败信息
			    	}
		     });
		}
	</script>
#else
#end
</body>
</html>